<template>
    <el-row>
        <el-row style='margin-top:10px;' v-if="ads.length">
            <el-col :span="8" v-for="(item, index) in ads" :key="index">
                <a :href="item.url" v-if="isHttpUrl(item.url)"><img :src="item.img_url" style="height:120px;width:300px" /></a>
                <router-link :to="item.url" v-if="!isHttpUrl(item.url)">
                    <img :src="item.img_url" style="height:120px;width:300px" />
                </router-link>
            </el-col>
        </el-row>
        <el-row v-for="ump in umps" :key="ump.name">
            <el-row style='margin:15px 0;'>
                <el-col :span="24">
                    <span style='padding-left:5px;color: #333;'>{{ump.name}}</span>
                </el-col>
            </el-row>
            <el-col :span="8" v-for="(item,index) in ump.sub" :key="index" @click.native="clickAddon(item)" v-show="item.status">
                <router-link :to="!item.disabled?item.link:''" :style="{cursor:item.disabled?'not-allowed':'cursor'}">
                    <div class='manage clearfix'>
                        <div class='manage-logo'>
                            <img :src="item.img">
                        </div>
                        <div class='manage-name text_overflow text_overflow_line_1'>{{item.name}}</div>
                        <div class='manage-desc'>{{item.describe}}</div>
                        <div class='manage-tag' v-if="item.tag">{{item.tag}}</div>
                    </div>
                </router-link>
            </el-col>
        </el-row>
    </el-row>
</template>

<script>
export default {
    layout(context) {
        return context.app.$cookies.get("layout");
    },
    data() {
        return {
            ads: [],
            umps: [
                {
                    name: "基础",
                    sub: [
                        {
                            name: "小程序信息",
                            header: "小程序信息",
                            describe: "查看小程序信息",
                            tag: "",
                            link: "/app/wxa_info",
                            img: "/assets/wxa-info.png",
                            status: true
                        },
                        // {
                        //     name: "微信支付",
                        //     header: "微信支付",
                        //     describe: "微信支付",
                        //     tag: "",
                        //     link: "/wxpay",
                        //     img: "/assets/wxpay-img.png",
                        //     status: true
                        // },
                        // {
                        //     name: "小程序插件",
                        //     header: "插件列表",
                        //     describe: "设置小程序插件信息，一键跳转小程序插件",
                        //     tag: "",
                        //     link: "/plugin",
                        //     img: "/assets/plugin-img.png",
                        //     status: true
                        // }
                    ]
                },
                {
                    name: "营销",
                    sub: [
                        // {
                        //     name: "集赞",
                        //     header: "活动设置",
                        //     describe: "集赞有礼，高效的推广方式",
                        //     tag: "",
                        //     link: "/jizan/config",
                        //     img: "/assets/jizan-img.png",
                        //     status: true
                        // },
                        // {
                        //     name: "社区",
                        //     header: "社区配置",
                        //     describe: "了解用户需求，积累用户",
                        //     tag: "",
                        //     link: "/bbs/config",
                        //     img: "/assets/bbs-img.png",
                        //     status: true
                        // },
                        // {
                        //     name: "文章",
                        //     header: "文章配置",
                        //     describe: "通过文章咨询提高用户依赖性",
                        //     tag: "",
                        //     link: "/article/config",
                        //     img: "/assets/article-img.png",
                        //     status: true
                        // },
                        // {
                        //     name: "表单",
                        //     header: "表单列表",
                        //     describe: "自定义表单，帮助企业数据采集",
                        //     tag: "",
                        //     link: "/form",
                        //     img: "/assets/form-img.png",
                        //     status: true
                        // },
                        {
                            name: "优惠券",
                            header: "优惠券",
                            describe: "优惠券发放，快速吸粉",
                            tag: "",
                            link: "/shop/coupon/coupon",
                            img: "/assets/coupon-img.png",
                            status:
                                this.$cookies.get("layout") == "shop"
                                    ? true
                                    : false
                        },
                        {
                            name: "满减活动",
                            header: "满减活动",
                            describe: "订单满足定制金额即享优惠",
                            tag: "",
                            link: "/shop/full",
                            img: "/assets/full-img.png",
                            status:
                                this.$cookies.get("layout") == "shop"
                                    ? true
                                    : false
                        },
                        {
                            name: "快递",
                            header: "快递列表",
                            describe: "选择快递，帮助企业实现快递管理",
                            tag: "",
                            link: "/shop/delivery",
                            img: "/assets/delivery-img.png",
                            status:
                                this.$cookies.get("layout") == "shop"
                                    ? true
                                    : false
                        },
                        //  {
                        //     name: "运费管理",
                        //     header:"运费管理",
                        //     describe: "运费管理",
                        //     tag: "",
                        //     link: "/shop/fee",
                        //     img: "/assets/full-img.png"
                        // }
                        // {
                        //     name: "小票打印",
                        //     header: "设备列表",
                        //     describe: "可以方便打印订单",
                        //     tag: "",
                        //     link: "/shop/print",
                        //     img: "/assets/print-img.png",
                        //     status:
                        //         this.$cookies.get("layout") == "shop"
                        //             ? true
                        //             : false
                        // },
                        // {
                        //     name: "消息推送",
                        //     header: "消息推送",
                        //     describe: "给用户推送最新活动",
                        //     tag: "",
                        //     link: "/message",
                        //     img: "/assets/message-img.png",
                        //     status: true
                        // },
                        // {
                        //     name: "WIFI",
                        //     header: "wifi列表",
                        //     describe: "一键连接，秒上网",
                        //     tag: "",
                        //     link: "/wifi",
                        //     img: "/assets/wifi-img.png",
                        //     status: true
                        // },
                        // {
                        //     name: "联系人",
                        //     header: "联系人列表",
                        //     describe: "设置联系人信息，一键拨号，方便快捷",
                        //     tag: "",
                        //     link: "/contacts",
                        //     img: "/assets/phone-img.png",
                        //     status: true
                        // },
                        // {
                        //     name: "小程序导航",
                        //     header: "小程序列表",
                        //     describe: "设置小程序信息，一键跳转小程序",
                        //     tag: "",
                        //     link: "/miniapps",
                        //     img: "/assets/xcx.png",
                        //     status: true
                        // },
                        // {
                        //     name: "分销",
                        //     header: "分销设置",
                        //     describe: "增加销售额，快速拓展品牌知名度",
                        //     tag: "",
                        //     link: "/shop/distribution/config",
                        //     img: "/assets/distribute-img.png",
                        //     status:
                        //         this.$cookies.get("layout") == "shop"
                        //             ? true
                        //             : false,
                        //     disabled: false
                        // },
                        // {
                        //     name: "拼团",
                        //     header: "拼团活动",
                        //     describe: "拼团购买更优惠",
                        //     tag: "",
                        //     link: "/shop/print",
                        //     img: "/assets/group-img.png",
                        //     status:
                        //         this.$cookies.get("layout") == "shop"
                        //             ? true
                        //             : false,
                        //     disabled: true
                        // },
                        // {
                        //     name: "去版权",
                        //     header: "版权设置",
                        //     describe: "客户可以设置自己的版权logo",
                        //     tag: "",
                        //     link: "/copyright",
                        //     img: "/assets/copyright-img.png",
                        //     status: true,
                        //     disabled: false
                        // },
                        // {
                        //     name: "小程序网页域名",
                        //     header: "域名列表",
                        //     describe: "支持小程序打开各种网页",
                        //     tag: "",
                        //     link: "/webdomain",
                        //     img: "/assets/domain-img.png",
                        //     status: true,
                        //     disabled: false
                        // }
                    ]
                },
                // {
                //     name: "客服",
                //     sub: [
                //         {
                //             name: "美洽",
                //             header: "美洽",
                //             describe: "美洽可接收与回复小程序用户的客服消息",
                //             tag: "",
                //             link: "/meiqia",
                //             img: "/assets/meiqia.png",
                //             status: true
                //         }
                //     ]
                // }
            ]
        };
    },
    async asyncData({ app }) {
        const ads = await app.$axios.$get("/api/app/home/public/ads?type=2");

        return {
            ads: ads.data
        };
    },
    methods: {
        clickAddon(item) {
            if (item.disabled) {
                this.$message.warning("暂未开放，敬请期待！");
                return;
            }
            this.$cookies.set("header", item.header, {
                path: "/",
                domain: this.getCoryright(),
                maxAge: 60 * 60 * 24 * 7
            });
        }
    }
};
</script>

<style scoped>
.ump {
    padding: 10px;
}

.manage {
    margin: 5px;
    padding: 10px;
    display: block;
    background: #f8f8f8;
    border-radius: 2px;
}

.manage:hover {
    background: #e9e9e9;
}

.clearfix:after {
    content: "";
    visibility: hidden;
    font-size: 0;
    height: 0;
    display: block;
    clear: both;
}

.manage-logo {
    float: left;
}

.manage-logo img {
    width: 40px;
    height: 40px;
    border-radius: 2px;
    display: block;
}

.manage-name {
    margin-left: 50px;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    color: #333;
    font-weight: bold;
}

.manage-desc {
    height: 16px;
    line-height: 16px;
    margin-left: 50px;
    font-size: 12px;
    color: #999;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.manage-tag {
    float: right;
    margin-top: -36px;
    color: #ed3f14;
}

.spin-container {
    display: inline-block;
    width: 100%;
    margin-top: 200px;
    position: absolute;
}
</style>
